<template>
  <a-form
    ref="formRef"
    :model="formState"
    :label-col="{ span: 3 }"
    autoComplete="off"
    :rules="rules"
    class="gongzuojingli"
  >
    <a-form-item label="公司名称" name="companyName">
      <a-input
        style="width: 500px"
        size="large"
        v-model:value="formState.companyName"
        placeholder="请输入公司名称"
      />
    </a-form-item>

    <a-form-item label="所在行业" name="industryCode">
      <a-tree-select
        style="width: 500px"
        size="large"
        v-model:value="formState.industryCode"
        placeholder="请选择所在行业"
        :fieldNames="{ label: 'name', value: 'code', children: 'children' }"
        :tree-data="industryList"
        allow-clear
        showSearch
        tree-default-expand-all
        treeNodeFilterProp="name"
      >
      </a-tree-select>
    </a-form-item>

    <a-form-item label="职位名称" name="positionCode">
      <a-tree-select
        size="large"
        style="width: 500px"
        :fieldNames="{ label: 'name', value: 'code', children: 'children' }"
        v-model:value="formState.positionCode"
        placeholder="请选择职位名称"
        :tree-data="posList"
        allow-clear
        showSearch
        tree-default-expand-all
        treeNodeFilterProp="name"
      >
      </a-tree-select>
    </a-form-item>

    <a-form-item label="在职时间" name="onJobTime">
      <a-range-picker
        v-model:value="formState.onJobTime"
        size="large"
        style="width: 500px"
        :placeholder="['请选择在职时间']"
        picker="month"
      />
    </a-form-item>

    <a-form-item label="汇报上级" name="reportTo">
      <a-input
        style="width: 500px"
        size="large"
        v-model:value="formState.reportTo"
        placeholder="请输入汇报上级"
      />
    </a-form-item>

    <a-form-item label="带领团队人数" name="underlingNum">
      <a-input-number
        style="width: 500px"
        size="large"
        v-model:value="formState.underlingNum"
        placeholder="请输入带领团队人数"
      />
    </a-form-item>

    <a-form-item
      label="工作内容"
      name="description"
      class="show-count no-resize wrapper-textarea"
    >
      <a-textarea
        style="height: 160px"
        size="large"
        v-model:value="formState.description"
        placeholder="请输入工作内容"
        :maxlength="1500"
      />
      <div class="count">
        <span>{{ formState?.description?.length }}</span
        >/1500
      </div>
    </a-form-item>

    <a-col :span="24" class="btn-box">
      <a-form-item>
        <a-button size="large" @click="emit('close')">取消</a-button>
        <a-button size="large" type="primary" @click="onhandleSubmit"
          >保存</a-button
        >
      </a-form-item>
    </a-col>
  </a-form>
</template>

<script lang="ts" setup>
import { reactive, onMounted, ref } from 'vue';
import ResumeService from '@/api/resume';
import _ from 'lodash';
import { message } from 'ant-design-vue';
import { array2Tree, disabledTreeData } from '@/utils/util';
import { gongzuojingliRules as rules } from './config';
import CommonService from '@/api/common';
import dayjs from 'dayjs';

const props = defineProps<{ value: any }>();
const emit = defineEmits(['finish', 'close']);

const defaultFormState = {
  companyName: null,
  industryCode: null,
  positionCode: null,
  onJobTime: [] as any,
  reportTo: '',
  underlingNum: '',
  description: '',
  id: null,
};

const formState = reactive(defaultFormState);
const formRef = ref();
const industryList = ref<any>([]);
const posList = ref();

async function selectIndustryListFromRedis() {
  try {
    const resp = await CommonService.selectIndustryListFromRedis();
    if (resp.code === 200) {
      industryList.value = array2Tree(resp.data, '0', 'code', 'parentCode');
      disabledTreeData(industryList.value);
      industryList.value.unshift({ name: '不限', code: '0' });
    }
  } catch (error) {
    console.log(error);
  }
}

async function selectPositionListFromRedis() {
  try {
    const resp = await CommonService.selectPositionListFromRedis();
    if (resp.code === 200) {
      posList.value = array2Tree(resp.data, '', 'code', 'parentCode');
      disabledTreeData(posList.value);
    }
  } catch (error) {
    console.log(error);
  }
}

const onhandleSubmit = _.debounce((key: any) => {
  onSubmit();
}, 500);

async function onSubmit() {
  try {
    await formRef.value?.validate();
    const api = formState.id
      ? ResumeService.editSeekerWorkExperience
      : ResumeService.addSeekerWorkExperience;
    const params: any = {
      ...formState,
      startTime: formState.onJobTime?.[0]?.format('YYYY-MM'),
      endTime: formState.onJobTime?.[1]?.format('YYYY-MM'),
    };

    const resp = await api(params);
    if (resp.code === 200) {
      message.success(`操作成功`);
      emit('finish');
    } else {
      message.error(resp?.msg || '操作失败');
    }
  } catch (error) {
    console.log(error);
  }
}

function initFormData() {
  if (!props.value) return;
  const value = props.value;
  formState.companyName = value?.companyName;
  formState.industryCode = value?.industryCode || '0';
  formState.positionCode = value?.positionCode;
  const time = [
    value?.startTime ? dayjs(value.startTime) : null,
    value?.endTime ? dayjs(value.endTime) : null,
  ];
  formState.onJobTime = time;
  formState.reportTo = value.reportTo;
  formState.underlingNum = value.underlingNum;
  formState.description = value.description;
  formState.id = value.id;
}

onMounted(() => {
  selectIndustryListFromRedis();
  selectPositionListFromRedis();
  initFormData();
});
</script>

<style lang="less" scoped>
.gongzuojingli {
  background-color: #f3f3f5;
  padding-top: 24px;
  margin-bottom: 50px;
  padding: 24px 20px 20px 0;
  .btn-box {
    padding-top: 8px;
  }
}
</style>
